<template>
    <div class="tags" v-show="tags.show">
        <ul class="tags-list">
            <li class="tags-li" v-for="(item, index) in tags.list" :class="{ active: isActive(item.path) }" :key="index">
                <router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
                <el-icon @click="closeTags(index)">
                    <Close />
                </el-icon>
            </li>
        </ul>
        <!-- <div class="tags-close-box" v-show="showWindowSettings">
            <el-dropdown @command="handleTags">
                <el-button size="small" type="primary" text>
                    窗口设置
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu size="small">
                        <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div> -->
        
        <!-- 新增的窗口管理按钮 -->
        <div class="window-management">
            <el-dropdown @command="handleTags">
                <el-button size="small" type="primary">
                    窗口管理
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu size="small">
                        <el-dropdown-item command="all">关闭所有页面</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useTagsStore } from '../stores/tags';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const showWindowSettings = ref(false);
const tags = useTagsStore();

const isActive = (path) => {
    return path === route.fullPath;
};

const closeTags = (index) => {
    const delItem = tags.list[index];
    tags.delTagsItem(index);
    const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
    if (item) {
        delItem.path === route.fullPath && router.push(item.path);
    } else {
        router.push('/');
    }
};

const setTags = (route) => {
    const isExist = tags.list.some(item => item.path === route.fullPath);
    if (!isExist) {
        if (tags.list.length >= 8) tags.delTagsItem(0);
        const index = tags.list.findIndex(item => item.name == 'notFound');
        if (index >= 0) {
            tags.list.splice(index, 1);
        }
        tags.setTagsItem({
            name: route.name,
            title: route.meta.title,
            path: route.fullPath
        });
    }
};

setTags(route);

onBeforeRouteUpdate(to => {
    setTags(to);
});

const closeAll = () => {
    tags.clearTags();
    router.push('/home/dashboard');
    showWindowSettings.value = true;
};

const closeOther = () => {
    const curItem = tags.list.filter(item => item.path === route.fullPath);
    tags.closeTagsOther(curItem);
    showWindowSettings.value = true;
};

const handleTags = (command) => {
    command === 'other' ? closeOther() : closeAll();
};

onMounted(() => {
    closeAll();
    showWindowSettings.value = false;
});

</script>

<style>
.tags {
    position: relative;
    height: 45px;
    overflow: hidden;
    background: #fff;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
}

.tags-list {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tags-li {
    display: flex;
    align-items: center;
    margin-right: 10px;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    height: 35px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0 5px 0 12px;
    color: #666;
    transition: all 0.3s ease-in;
}

.tags-li:not(.active):hover {
    background: #f8f8f8;
}

.tags-li.active {
    color: #fff;
    background-color: #293846;
}

.tags-li-title {
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
}

.tags-li.active .tags-li-title {
    color: #fff;
}

.tags-close-box {
    position: absolute;
    right: 130px; /* 调整位置以适应新按钮 */
    top: 0;
    box-sizing: border-box;
    padding-top: 2px;
    text-align: center;
    width: 110px;
    height: 45px;
    background: #fff;
    z-index: 10;
}

.window-management {
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 2px;
    padding-right: 10px;
    text-align: center;
    background: #fff;
    z-index: 10;
}

.window-management .el-button {
    --el-button-size: 35px;
    --el-button-text-color: #666;
}
</style>
